<template>
  <div class="login">
    <div class="denglu">
      <div class="image">
        <img :src="loginlogo.pc_logo" alt="" />
      </div>
      <div class="text">{{ loginlogo.pc_name }}</div>
      <div class="inps">
        <p>
          <input type="text" v-model="value.account" placeholder="请输入账号" />
        </p>
        <p>
          <input type="password" v-model="value.password" placeholder="请输入密码" />
        </p>
      </div>
      <div class="but">
        <button @click="but">登录</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import instance from '../utils/request'
import { useRouter } from 'vue-router'
import { website } from '@/api/team'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'

let Router = useRouter()
let loginlogo = ref({
  pc_logo: '',
  pc_name: ''
})
const websites = () => {
  website().then(res => {
    loginlogo.value = res.data.data
    console.log(loginlogo.value, 'sssS')
  })
}
websites()
const value: any = ref({
  account: '',
  password: '',
  scene: 1
})

const but = () => {
  if (value.value.account == '') {
    ElMessage.warning('请输入账号')
  } else if (value.value.password == '') {
    ElMessage.warning('请输入账号密码')
  } else {
    instance.post('/login/account', { ...value.value }).then((res: any) => {
      if (res.data.code == 1) {
        localStorage.setItem('token', res.data.data.token)
        localStorage.setItem('nickname', res.data.data.nickname)
        localStorage.setItem('avatar', res.data.data.avatar)
        localStorage.setItem('position', res.data.data.position)
        localStorage.setItem('password', value.value.password)
        // ElMessageBox.alert('登陆成功', '登录', {
        //   // if you want to disable its autofocus
        //   // autofocus: false,
        //   confirmButtonText: 'OK',
        //   callback: (action: Action) => {
        //     ElMessage({
        //       type: 'success',
        //       message: `已为您跳转到首页`,
        //     })
        ElMessage({
          type: 'success',
          message: '登录成功'
        })
        Router.push('/home/index')
        //   },
        // })
        // alert('登录成功')
      } else {
        ElMessage({
          type: 'warning',
          message: '账号或密码错误'
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.but {
  width: 380px;
  margin-left: 10%;
  margin-top: 59px;

  button {
    font-size: 24px;
    border: none;
    width: 100%;
    height: 46px;
    border-radius: 35px;
    background: red;
    color: #fff;
  }
}

.inps {
  margin-left: 10%;

  input {
    width: 380px;
    height: 46px;
    margin-top: 45px;
    border: none;
    border-bottom: 2px solid #d8d8d8;
    outline: none;
    color: #9e9e9e;
    font-size: 18px !important;
  }
}

.denglu {
  width: 500px;
  height: 500px;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -250px;
  z-index: 999;
}

.text {
  text-align: center;
  font-weight: 800;
  color: red;
  font-size: 30px;
  margin-top: 10px;
}

.image {
  text-align: center;
  margin-top: 38px;

  img {
    width: 60px;
    height: 60px;
  }
}

.login {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/login.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.images {
  width: 100%;
  height: 500px;
  position: absolute;
  left: 0;
  bottom: 0;

  img {
    width: 100%;
    height: 100%;
  }
}

.images2 {
  width: 50%;
  height: 50%;
  z-index: 99999;
  position: absolute;
  left: 0;
  bottom: 0;

  img {
    width: 100%;
    height: 100%;
  }
}

.images3 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
